import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['navList', 'baseNav']),
    
    // 一级导航ID
    firstNavId() {
      if (this.$route.path === '/' || this.$route.path.includes('detail')) {
        return this.detailData?.firstCategory?.id || null;
      }
      return this.extractNavIdFromPath(this.$route.path);
    },
    
    // 一级导航对象
    firstNav() {
      return !this.firstNavId ? null : this.navList.find(item => item.id == this.firstNavId);
    },
    
    // 二级导航ID
    secondNavId() {
      if (this.$route.path === '/') return null;
      if (this.$route.path.includes('detail')) {
        return this.detailData?.secondCategory?.id || null;
      }
      let cId = null
      if (this.$route.path.includes('about')) {
        cId = this.firstNav && this.firstNav.children ? this.firstNav.children[0].id : null;
      } else {
        let subId = this.$route.query.subId
        if (subId) {
          cId = this.baseNav.find(item => item.id == subId)?.parentId || null
        }
      }
      return this.$route.query.id || cId;
    },
    
    // 二级导航对象
    secondNav() {
      return !this.secondNavId ? null : this.baseNav.find(item => item.id == this.secondNavId);
    },
    
    // 二级菜单列表
    secondMenus() {
      return this.firstNav && this.firstNav.children ? this.firstNav.children : [];
    },
    
    // 三级导航ID
    thirdNavId() {
      if (this.$route.path === '/') return null;
      if (this.$route.path.includes('detail')) {
        return this.detailData?.thirdCategory?.id || null;
      }
      return this.$route.query.subId || null;
    },
    
    // 三级导航对象
    thirdNav() {
      return !this.thirdNavId ? null : this.baseNav.find(item => item.id == this.thirdNavId);
    },
    
    // 当前导航信息
    currNavInfo() {
      if (this.$route.path === '/') return null;
      
      if (this.$route.path.includes('detail')) {
        const navInfo = localStorage.getItem('navInfo');
        return navInfo ? JSON.parse(navInfo) : null;
      }
      
      const currId = this.thirdNavId || this.secondNavId;
      return currId ? this.baseNav.find(item => item.id == currId) : null;
    },
    
    // 详情页数据(新增)
    detailData() {
      if (!this.$route.path.includes('detail')) return null;
      const navInfo = localStorage.getItem('navInfo');
      if (!navInfo) return null;
      
      const parsedInfo = JSON.parse(navInfo);
      let nav = this.getCategoryByID(parsedInfo.id);
      if (parsedInfo.parentId &&  nav.secondCategory && parsedInfo.parentId == nav.secondCategory.id) {
        nav['thirdCategory'] = parsedInfo
      }
      return nav
    }
  },
  
  methods: {
    // init() {
    //   const route = this.$route
    //   if (route.path == '/') {
    //     return
    //   }
    //   console.log(route.path, 34345)
    //   if (route.path.includes('detail')) {
    //     console.log(route.path, 34345)
    //     this.detailPageInit()
    //     return
    //   }
    //   this.handleFirstNav(this.extractNavIdFromPath(route.path))

    //   let secondNavId = null
    //   if (route.query.id) {
    //     secondNavId = route.query.id
    //   } else {
    //     secondNavId = this.firstNav ? this.firstNav.children[0].id : null
    //   }
    //   this.handleSecondNav(secondNavId)

    //   let thirdNavId = null
    //   if (route.query.subId) {
    //     thirdNavId = route.query.subId
    //     this.handleThirdNav(thirdNavId)
    //   }

    //   let currNavInfo = null, currId = route.query.subId || route.query.id || secondNavId;
    //   if (currId) {
    //     currNavInfo = this.baseNav.find(item => item.id == currId)
    //   }
    //   this.currNavInfo = currNavInfo
    // },
    handleFirstNav(firstNavId) {
      this.firstNavId = firstNavId
      this.firstNav = !firstNavId ? null : this.navList.find(item => item.id == firstNavId)
    },
    handleSecondNav(secondNavId) {
      this.secondNavId = secondNavId
      this.secondNav = !secondNavId ? null : this.baseNav.find(item => item.id == secondNavId)
      this.secondMenus = this.firstNav ? this.firstNav.children : []
    },
    handleThirdNav(thirdNavId) {
      this.thirdNavId = thirdNavId
      this.thirdNav = !thirdNavId ? null : this.baseNav.find(item => item.id == thirdNavId)
    },
    detailPageInit() {
        const navInfo = localStorage.getItem('navInfo')
        if (navInfo) {
        this.currNavInfo = JSON.parse(navInfo)
        const nav = this.getCategoryByID(this.currNavInfo.id)
        nav.firstCategory && this.handleFirstNav(nav.firstCategory.id)
        nav.secondCategory && this.handleSecondNav(nav.secondCategory.id)
        this.handleThirdNav(navInfo.id)
      }
    },
    saveNavInfo() {
      let info = {
        id: this.firstNavId,
        ...this.currNavInfo
      }
      localStorage.setItem('navInfo', JSON.stringify(info))
    },
    // 从路径中提取导航ID
    extractNavIdFromPath(path) {
      if (!path || path === '/') return null;
      
      // 更新为新的路径格式提取方法
      const match = path.match(/^\/[^/]+\/(\d+)(\/|$)/)
      if (match && match[1]) {
        return parseInt(match[1])
      }
      return null
    },
    
    /**
     * 根据分类ID获取其所属的一级和二级分类
     * @param {Number|String} categoryId - 需要查找的分类ID
     * @return {Object} 包含firstCategory和secondCategory的对象
     */
    getCategoryByID(categoryId) {
      if (!categoryId || !this.navList || this.navList.length === 0) {
        return { firstCategory: null, secondCategory: null };
      }

      // 将ID转换为数字类型进行比较
      const catId = parseInt(categoryId);
      
      // 存储查找结果
      let result = {
        firstCategory: null,
        secondCategory: null
      };

      // 遍历一级分类
      for (const firstCat of this.navList) {
        // 判断是否为一级分类本身
        if (firstCat.id === catId) {
          result.firstCategory = firstCat;
          return result;
        }

        // 遍历二级分类
        if (firstCat.children && firstCat.children.length > 0) {
          for (const secondCat of firstCat.children) {
            // 判断是否为二级分类
            if (secondCat.id === catId) {
              result.firstCategory = firstCat;
              result.secondCategory = secondCat;
              return result;
            }

            // 遍历三级分类
            if (secondCat.children && secondCat.children.length > 0) {
              const thirdCat = secondCat.children.find(item => item.id === catId);
              if (thirdCat) {
                result.firstCategory = firstCat;
                result.secondCategory = secondCat;
                return result;
              }
            }
          }
        }
      }

      // 未找到匹配的分类
      return result;
    },

    updateMetaDescription(description) {
      if (!description) return;
      let meta = document.querySelector('meta[name="description"]');
      if (meta) {
        meta.setAttribute('content', description);
      } else {
        meta = document.createElement('meta');
        meta.name = 'description';
        meta.content = description;
        document.head.appendChild(meta);
      }
    },
    updateMetaKeywords(keywords) {
      if (!keywords) return
      let meta = document.querySelector('meta[name="keywords"]');
      if (meta) {
        meta.setAttribute('content', keywords);
      } else {
        meta = document.createElement('meta');
        meta.name = 'keywords';
        meta.content = keywords;
        document.head.appendChild(meta);
      }
    },
  },
}
